<template>
  <cu-layout tabbar="/pages/index/index" title="首页">
    <view class="card">
      <view class="card-box">
        <view v-if="agent.id" class="card-mian flex-vca">
          <view class="flex-a">
            <view class="">设备号：</view>
            <view class="text-16 font-600">{{ agent.iccid }}</view>
          </view>
          <view class="mt-20">
            <uv-button type="info" @click="$.router.go('/pages/index/bind')">切换设备</uv-button>
          </view>
        </view>
        <view v-else class="card-mian flex-vca">
          <view class="text-center text-white">暂无设备</view>
          <view class="mt-20">
            <uv-button type="info" size="large" @click="$.router.go('/pages/index/bind')"><view class="px-20">绑定设备</view></uv-button>
          </view>
        </view>
      </view>
    </view>
    <view class="p-14">
      <view class="flex py-15 rounded-6 text-center bg-white">
        <view class="w-quarter hair-r">
          <view class="text-15 font-600">{{ agent.flow_day ?? '-' }}</view>
          <view class="text-12 text-tips mt-5">剩余天数</view>
        </view>
        <view class="w-quarter hair-r">
          <view class="text-15 font-600">{{ agent.flow_today ?? '-' }}<text class="text-13 ml-2">G</text></view>
          <view class="text-12 text-tips mt-5">当月用量</view>
        </view>
        <!-- <view class="w-quarter hair-r">
          <view class="text-15 font-600">{{ agent.flow_use ?? '-' }}<text class="text-13 ml-2">G</text></view>
          <view class="text-12 text-tips mt-5">总用量</view>
        </view> -->
        <view class="w-quarter">
          <view class="text-15 font-600">{{ agent.flow_total ?? '-' }}<text class="text-13 ml-2">G</text></view>
          <view class="text-12 text-tips mt-5">总量</view>
        </view>
      </view>

      <view v-if="agent.id" class="flex py-15 rounded-6 text-center bg-white mt-15">
        <view class="w-quarter hair-r" @click="$.router.go('/pages/goods/combo')">
          <text class="iconfont icon-pay" />
          <view class="text-12 text-tips mt-5">充值缴费</view>
        </view>
        <view class="w-quarter hair-r" @click="$.router.go('/pages/user/combo', {agentId: agent.id})">
          <text class="iconfont icon-canyin" />
          <view class="text-12 text-tips mt-5">我的套餐</view>
        </view>
        <view class="w-quarter " @click="onRealName">
          <text class="iconfont icon-shiming" />
          <view class="text-12 text-tips mt-5">
            <text v-if="agent.prod_status_name === '在用'" class="text-primary">已实名</text>
            <text v-else class="">实名认证</text>
          </view>
        </view>
      </view>
    </view>
  </cu-layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import $ from '@/sheep'

const useUser = $.store('user')
const agent = computed(() => useUser.agent)
const isRealName = ref(false)

onLoad(async() => {
  uni.hideTabBar()
  await useUser.isReady
  reset()
  // if (agent.value.id) {
  //   onRealName()
  // }
})

// onShow(() => {
//   reset()
// })

onPullDownRefresh(() => {
  reset()
  setTimeout(function() {
    uni.stopPullDownRefresh()
  }, 500)
})

function reset() {
  if (!agent.value.id) return
  $.get('/user/todayAndUse', { id: agent.value.id }).then(res => {
	  if (res.success) {
	    agent.value.flow_today = res.data.flow_today
	    agent.value.flow_use = res.data.flow_use
	  }
  })
}

function onRealName() {
  if (!agent.value.id) return
  $.get('/user/realName', { id: agent.value.id }).then(res => {
	  if (res.success) {
      isRealName.value = res.data?.status === 1
	    if (res.data.status === 0) {
        $.utils.showModal({
          title: '温馨提示',
          content: 'Wi-Fi网络暂时无法使用，请进行实名认证开通网络!（若已实名成功请耐心等待审核通过）',
          confirmText: '实名认证'
        }).then(re => {
          if (re.confirm) {
            if ($.utils.isH5()) {
              window.location.href = res.data.url
            } else {
              uni.setClipboardData({
                data: res.data.url,
                success() {
                  $.utils.toast('复制成功,请用浏览器访问链接实名')
                }
              })
            }
          }
        })
      }
	  } else {
      $.utils.toast(res.msg)
    }
  })
}
</script>
<style lang="scss">

	.card {
		position: relative;
		width: 100%;
		height: 180px;
		overflow: hidden;
		&::after {
			content: '';
			position: absolute;
			left: -25%;
			bottom: 0;
			width: 150%;
			height: 100%;
			border-bottom-left-radius: 45%;
			border-bottom-right-radius: 45%;
			background-color: #fff;
		}
	}
	.card-box {
		position: relative;
		width: calc(100% - 28px);
		height: calc(100% - 30px);
		margin: 30px 14px;
		border-radius: 8px;
		overflow: hidden;
		z-index: 1;
		&::after {
			content: '';
			position: absolute;
			left: -25%;
			bottom: 0;
			width: 150%;
			height: 100%;
			border-bottom-left-radius: 50%;
			border-bottom-right-radius: 50%;
			background-image: linear-gradient(0deg, $uv-primary-dark, $uv-primary 50%);
		}
	}
	.card-mian {
		position: absolute;
		width: 100%;
		height: 100%;
		color: #fff;
		z-index: 2;
	}
	.w-quarter {
		width: 33.33333%;
		&.hair-r::after {
			height: 100%;
			top: 0%;
			bottom: 0;
		}
		.iconfont {
			font-size: 24px;
			color: $uv-primary;
		}
	}
</style>
